<template>
  <div class="app-container" style="padding: 0px;position:relative;">
    <div style="color: #72A4FF;font-size: 20px;font-weight: bold;">设备统计</div>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card" style="height:80px;background: #9B6CFC;border-radius:10px;margin-top: 40px;color: #FFFFFF;">
          <div style="font-size: 25px;text-align: center;margin-top: 8px;">设备总数：{{numAll}}</div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <count-meter :chart-data="countMeterObj" :height="'280px'"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { listMeterInfo } from "@/api/basic/meterInfo";
  import { queryCountBYMeter } from "@/api/basic/pointMeter";
  import countMeter from './countMeter';

  const countMeterObj = {
    titleText:'',
    legendData: [],//['ee', 'ff'],
    seriesData:[],//[{ value: 5, name: 'ee' },{ value: 6, name: 'ff' }],
  }

  export default {
    components: {countMeter},
    data() {
      return {
        numAll:0,
        countMeterObj:countMeterObj,
        meterInfoList:[],
      };
    },
    mounted() {

    },
    created() {
      this.getMeterInfos();
    },
    methods: {
      /** 查询参数信息配置列表 */
      getMeterInfos() {
        let obj={
          pageNum: 1,
          pageSize: 1000,
        }
        listMeterInfo(obj).then(response => {
          this.meterInfoList = response.rows;
          this.handleCountParam();
        });
      },
      handleCountParam() {
        let _this = this;
        _this.countMeterObj.legendData = [];
        _this.countMeterObj.seriesData = [];
        _this.numAll = 0;
        queryCountBYMeter().then(response => {
          response.forEach(function (item) {
            _this.numAll += item.countNum;
            let obj = _this.meterInfoList.find(meterInfo => meterInfo.id === item.meterId)
            _this.countMeterObj.legendData.push(obj.name+' '+item.countNum);
            _this.countMeterObj.seriesData.push({value: item.countNum, name: obj.name+' '+item.countNum});
          });
        })
      },

    },
  };
</script>

